import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import {
  Modal,
  Button,
  Form,
  message,
  Input,
  DatePicker,
  Select,
  InputNumber,
  Upload,
  Icon,
  Table,
  Card,
} from 'antd';
import PropTypes from 'prop-types';
import moment from 'moment';
import { getDictOptionsByCode } from '@/support/common';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { fromJS } from 'immutable';
import Spin from 'antd/es/spin';
import MaskText from '@/components/MaskText';

const FormItem = Form.Item;
const { TextArea } = Input;
const mapStateToProps = (state: any) => ({
  HandsetMng: state.HandsetMng,
});
class ActiveModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.object,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      // fileList:[],
    };
  }
  handleSubmit = () => {
    this.ok();
  };

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal();
  };
  ok = () => {
    const { isActive, dispatch, formData, freshPage } = this.props;
    let dType = 'DriverMng/postObjWithRes';
    const url = isActive
      ? '/msalcohollock/driver/activate/vehicle'
      : '/msalcohollock/driver/deactivate/vehicle';
    const unActStr = isActive ? '' : '撤销';
    this.setState({
      loading: true,
    });

    const postData = {
      sid: formData.sid,
      vin: formData.vin,
      cboxCode: formData.cboxCode,
      handheldsCode: formData.handheldsCode,
      facePictureUrl: formData.facePictureUrl,
    };
    dispatch({
      type: dType,
      payload: {
        url,
        ...postData,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          message.success(`${unActStr}激活成功`);
          this.close();
          freshPage();
        }
      },
    }).finally(() =>
      this.setState({
        loading: false,
      }),
    );
  };

  render() {
    const { formData, modalVisible, isActive } = this.props;
    const { loading } = this.state;
    const data = [{ ...formData }];
    const footer = (
      <div>
        <Button size="small" onClick={this.close}>
          取消
        </Button>
        <Button size="small" loading={loading} onClick={this.handleSubmit} type="primary">
          确定
        </Button>
      </div>
    );
    let title = isActive ? '激活监控' : '撤销激活';
    const columns = [
      {
        title: '司机手机号',
        dataIndex: 'phoneNumber',
        key: 'phoneNumber',
        render(val: any) {
          return <MaskText text={val} type="phone" />;
        },
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        render(val: any) {
          return <MaskText text={val} type="name" />;
        },
      },
      {
        title: '司机关联车辆VIN',
        dataIndex: 'vin',
        key: 'vin',
      },
      {
        title: '手持机编号',
        dataIndex: 'handheldsCode',
        key: 'handheldsCode',
      },
      {
        title: '控制盒编号',
        dataIndex: 'cboxCode',
        key: 'cboxCode',
      },
    ];
    const renderLoading = (isActive: boolean) => {
      return (
        <Spin
          size="large"
          tip={
            <div style={{ color: 'black', textAlign: 'center' }}>
              <p>{`${isActive ? '激活中' : '撤销中'},请耐心等候`}</p>
            </div>
          }
        />
      );
    };
    const renderTable = (isActive: boolean) => {
      const tab = (
        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered={true}
          style={{ marginTop: '20px' }}
        />
      );
      return isActive ? (
        <>
          <h3>激活后，该司机将可启动、驾驶该车辆，确定要激活该司机与该车的监控吗？</h3>
          {tab}
        </>
      ) : (
        <>
          <h3>撤销激活后，该司机将不可启动、驾驶该车辆，确定要撤销激活该司机与该车的监控吗？</h3>
          {tab}
        </>
      );
    };
    return (
      <Modal
        title={title}
        footer={footer}
        visible={modalVisible}
        width={700}
        onCancel={this.close}
        onOk={this.ok}
        bodyStyle={{ textAlign: 'center' }}
      >
        {!loading ? renderTable(isActive) : renderLoading(isActive)}
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(ActiveModal);
